<template>
  <div class="fireListPanel">
    <div class="fireCard">
        <el-collapse>
            <el-collapse-item 
                v-for="(itemA, indexA) in fireList" 
                :key="indexA+'fire'"
            > 
                <template v-slot:title>
                    <span class="num">+{{itemA.total}}</span>
                    <span class="time">{{itemA.time}}</span>
                </template>
               
                <div class="card" v-for="(itemB, indexB) in itemA.list" :key="indexB">
                    <img :src="'/images/fireReport/firepanel/' + itemB.imgName" alt="">
                    <div class="info">
                    <p>{{itemB.title}}</p>
                    <p>
                        <span>下垫面类型:</span>
                        <span>{{itemB.type}}</span>
                    </p>
                    <p>
                        <span>编号:</span>
                        <span>{{itemB.code}}</span>
                    </p>
                    <p>
                        <img src="/images/fireReport/position.png" alt="" title="定位" @click="btnFunc('position', itemB)">
                    </p>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
    <div class="btnBox" ref="btnBox">
      <p @click="btnFunc('detail', {id:fireId})">火情信息</p>
      <p @click="btnFunc('analyze', {id:fireId})">辅助分析</p>
    </div>
    <!-- <plan-list v-if="isShowPlanList" @close="isShowPlanList = false"></plan-list> -->
    <!-- <FireDetail v-if="showDetail" :fireId="fireId" @closeDetail="closeDetail"/> -->
  </div>
</template>

<script>
// import PlanList from '@/views/ContentPanel/MainMenu/FireInfo/PlanList/PlanList';
// import { point } from '@turf/helpers';
// import func from 'U/commonFunc';
import FireDetail from './FireDetail.vue'
import axios from 'axios'
let entityModel = [];
let handler3D = null;
export default {
  name:"fireListPanel",
  data(){
    return{
      fireList:[],//火点查询结果
      isShowPlanList:false,//过顶分析面板显隐
      showDetail:false,//显示火点详情面板
      fireId:null,//当前选择的火点的id
      activeNames: ['1']
    }
  },
  components:{
    FireDetail
  },
  props:["fireAllInfo"],
  watch:{
    fireAllInfo: {
      handler(newValue, oldValue) {
        this.receiveData(newValue)
      },
      deep: true
    },
  },
  mounted(){
    this.$nextTick(()=>{
      handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler3D.setInputAction(this.pickeFireEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    })
  },
  methods:{
    // 信息接收
    receiveData(newValue){
      let earthList = [];
      this.clearAll();
      // 刷新底部时间
      let lastRefreshTime = newValue.lastDateTime;
      // this.$store.commit('setLastRefreshTime', lastRefreshTime);
      // 转换格式，存储变量
      newValue.rows.forEach(ele=>{
        let obj = {};
        obj.id = ele.id;
        obj.total = ele.introVOList.length;
        obj.time = ele.data_time;
        obj.list = [];
        ele.introVOList.forEach(item=>{
          let obj2 = {};
          obj2.id = item.id;
          obj2.title = item.location;
          obj2.type = item.vegType;
          obj2.code = item.code;
          obj2.longitude = item.longitude;
          obj2.latitude = item.latitude;
          obj2.cityRegion = item.cityRegion;//行政区划
          obj2.elevation_aver = item.elevation_aver;//平均高程
          obj2.intensity_t = item.intensity_t;//火点强度
          obj2.imgName = this.changeImgName(item.vegType)
          obj.list.push(obj2)
          earthList.push(obj2)
        })
        this.fireList.push(obj)
        console.log(this.fireList)
      })
      this.dataToEarth(earthList)
      this.$store.commit("changeEarthList",earthList)
      
    },
    // 格式化图片
    changeImgName(data){
      let imgName;
      switch(data){
        case "森林":{
          imgName = 'senlin.png'
          break;
        }
        case "草地":{
          imgName = 'caodi.png'
          break;
        }
        case "农田及自然植被":{
          imgName = 'nongtian.png'
          break;
        }
        case "灌木":{
          imgName = 'guanmu.png'
          break;
        }
        case "城市或荒漠":{
          imgName = 'chengshi.png'
          break;
        }
      }
      return imgName
    },
    // 按钮点击
    btnFunc(type, data){
      switch(type){
        case "position":{
          let coordinates = [data.longitude, data.latitude];
          // func.zoomToPoint(coordinates);
          viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(data.longitude,data.latitude,20000),
          });
          break;
        }
        // case "detail":{
        //   this.$store.commit('setSmallPanel', 'fireDetail')
        //   this.$store.commit('setDetailId', data.id)
        //   break;
        // }
        // case "analyze":{
        //   this.$store.commit('setSmallPanel', 'fireAnalyze')
        //   this.$store.commit('setDetailId', data.id)
        //   break;
        // }
        // case "weixing":{
        //   this.isShowPlanList = true;
        //   this.$store.commit('setFireItem', data);
        //   break;
        // }
      }
      // this.$refs.btnBox.style.display = 'none'
    },
    handleClosePlanList(){
      // this.$store.commit('setSmallPanel', '')
    },
    handleChange(){

    },
    // 点位上球
    dataToEarth(data){
      entityModel.forEach(ele=>{
        viewer.entities.remove(ele)
      })
      entityModel = [];
      //添加标记
      for (let item of data) {
        let entity = viewer.entities.add({
          name: item.title + item.id,
          id: item.id,
          position: Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude),
          billboard: {
            // image: `./images/fireIcon/caodi.png`,
            image: `./images/fireReport/fireIcon/${item.imgName}`,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            width:30,
            height:30,
            scaleByDistance: new Cesium.NearFarScalar(10000, 1.5, 100000, 1),
            disableDepthTestDistance : Number.POSITIVE_INFINITY
          },
          entityType:"fire",
        });
        entityModel.push(entity);
      }
    },
    // 清除
    clearAll(){
      // 清除球上的点
      for (var i = 0; i < entityModel.length; i++) {
        viewer.entities.remove(entityModel[i]);
      }
      entityModel = [];
      // 清除列表
      this.fireList = [];
    },
    // 拾取
    pickeFireEvent(movement){
      let that = this;
      let pickedObject = viewer.scene.pick(movement.position);
      if (
        Cesium.defined(pickedObject) &&
        Cesium.defined(pickedObject.id) &&
        pickedObject.id.entityType === 'fire'
      ) {
        // 内容
        that.fireId = pickedObject.id.id;
        that.$store.commit("changeFireId",that.fireId)
        that.showDetail = true;
        that.$store.commit("changeShowFireDetail",true)
        // 把id传递给报告
        this.$emit('setFireId', that.fireId)
      }else{
        console.log('none')
      }
    },
    // 关闭详情面板
    closeDetail(){
      this.showDetail = false;
    },
  },
  beforeUnmount(){
    entityModel.forEach(ele=>{
      viewer.entities.remove(ele)
    })
    entityModel = [];
    if(handler3D){
      handler3D.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
      handler3D = null;
    }
  },
}
</script>

<style lang="stylus">
.fireListPanel{
    height:300px;
  .fireCard {
    text-align: left;
    .el-collapse{
      border-top: unset;
      border-bottom: unset;
      .el-collapse-item__header{
        border: 1px solid #17d0ff;
        height:39px;
        line-height:39px;
        box-sizing: border-box;
        color: #ffffff;
        background: #06233c;
        border: 1px solid rgba(23,208,255,0.38);
        padding:12px 20px;
        .num{
          // padding:8px;
          background:rgba(205,91,0,1);
          font-size: 12px;
          width:24px;
          height:16px;
          border-radius: 3px;
          line-height:16px;
          text-align: center;
          margin-right: 16px;
        }
      }
      .el-collapse-item__wrap{
        background-color: unset;
        border-bottom: unset;
      }
      .el-collapse-item__content{
        padding-bottom: 0;
        .card{
          padding:11px;
          overflow: hidden;
          >img{
            float: left;
            margin-right:11px;
            width: 42px;
            height: 46px;
          }
          .info{
            position: relative;
            p{
              font-size: 14px;
              color:#fff;
              span:first-child{
                color:rgba(109,204,188,1);
              }
            }
            p:first-child{
              font-weight: 900;
              color:rgba(23,208,255,1);
            }
            p:last-child{
              position: absolute;
              right:-11px;
              bottom:0;
              img{
                width:20px;
                height: 20px;
                margin-left: 10px;
                cursor: pointer;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="stylus" scoped>
.fireListPanel{
  width:100%;
  flex:1;
  overflow: auto;
  padding-right: 5px;
  .btnBox{
    display: none;
    position:fixed;
    left:vw(500);
    top:vh(300);
    padding:vh(10) vw(15);
    background:rgba(0, 20, 32, .8);
    border:1px solid #0c4f55;
    color:#fff;
    line-height:vh(26);
    opacity: 0.8;
    background: #05253c;
    border: 1px solid #17d0ff;
    p{
      cursor: pointer;
    }
    p:hover{
      color:#00e5fd;
    }
  }
  .btnBox:hover{
    display:block;
  }
}
</style>